<script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>

<style>

    .glyphicon-arrow-up{
        color: red;
    }

    .glyphicon-arrow-down{
        color: #76d471;
    }
    #refreshs{
        position:fixed;
        top: 200px;

        width: 150px;
        border: 1px solid #cccccc;
        border-right: none;
        border-radius:5px 0 0 5px;
        background: #ffffff;
        padding: 10px 5px;
        z-index: 999;
    }
    .arrows{
        position: absolute;
        left: -41px;
        top: 15px;
        width: 40px;
        height: 40px;
        line-height:40px;
        text-align: center;
        border: 1px solid #ffffff;
        background: #62a6f5;
        cursor: pointer;
    }
    .refreshss{
        cursor: pointer;
        background: #62a6f5;
        position: absolute;
        left: -41px;
        top: 54px;
        width: 40px;
        height: 40px;
        line-height:40px;
        text-align: center;
        border: 1px solid #ffffff;
    }
</style>
<div id="refreshs" style="right:0px;">
    <div class="arrows"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-arrow-right"></span></div>
    <div class="refreshss" onclick="refreshs()"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-refresh"></span></div>
    <form class="layui-form" action="">
        <div class="row">
            <div class="col-md-10 col-md-offset-1" >
                <select  lay-filter="business" id="select"  lay-verify="type" name="business"  >
                    <option value="">请选择应用</option>
                </select>
            </div>
        </div>
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-10 col-md-offset-1" >
                <input type="text" class="layui-input" placeholder="请选择时间" autocomplete="off" id="date">
            </div>
        </div>

        <!--<div class="row" style="margin-top: 10px;">-->
            <!--<div class="col-md-10 col-md-offset-1" style="text-align: center;">-->
                <!--<div class="btn-group-vertical" role="group" style="width: 100%;" id="dateselect">-->
                    <!--<div type="button" class="btn btn-default">1分钟</div>-->
                    <!--<div type="button" class="btn btn-default">半小时</div>-->
                    <!--<div type="button" class="btn btn-default btn-primary">1小时</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->

        <!--<span class="glyphicon glyphicon-refresh" style="font-size: 30px;"></span>-->
    </form>
</div>


    <div class="row" style="margin-top: 10px;">
        <#if shiro.hasPermission("data:survey:ipCount")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats5">
            <div class="stats_title">
                IP数
            </div>
            <div class="stats_amount" id="stats5_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
    </#if>
<#if shiro.hasPermission("data:survey:lockedDomain")>
        <div class="col-md-1 stats_box" id="stats7">
            <div class="stats_title">
                被封域名数
            </div>
            <div class="stats_amount" id="stats7_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:survey:newArticle")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats2">
            <div class="stats_title">
                新增用户数
            </div>
            <div class="stats_amount" id="stats2_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:survey:activeUser")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats3">
            <div class="stats_title">
                活跃用户数
            </div>
            <div class="stats_amount" id="stats3_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:survey:totalUser")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats1">
            <div class="stats_title">
                累计用户数
            </div>
            <div class="stats_amount" id="stats1_num">
                0
            </div>

        </div>
</#if>
<#if shiro.hasPermission("data:survey:newArticle")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats6">
            <div class="stats_title">
                文章新增数
            </div>
            <div class="stats_amount" id="stats6_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:survey:forwardArticle")>
        <div class="col-xs-6 col-md-1 stats_box"  id="stats4">
            <div class="stats_title">
                转发文章数
            </div>
            <div class="stats_amount" id="stats4_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>

<!--<#if shiro.hasPermission("data:survey:ArticlePeople")>-->
<!--<div class="col-xs-6 col-md-1 stats_box"  id="stats8">-->
    <!--<div class="stats_title">-->
        <!--转发文章人数-->
    <!--</div>-->
    <!--<div class="stats_amount" id="stats8_num">-->
        <!--0-->
    <!--</div>-->
    <!--<div class="stats_contrast">-->
        <!--同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>-->
    <!--</div>-->
<!--</div>-->
<!--</#if>-->
</div>



<script>
    <!--统计概况-->
    function refreshs(){
        if(data_id){
            statsInit(data_id,_date,dateselect);
            chartPage.init(data_id,_date,dateselect);
            window.clearInterval(getdata);
            getdata = window.setInterval(function(){
                if($(window.parent.document).find(".page-tabs-content .active").attr('data-id')!='modules/view/statsRecord.html'){
                    return;
                }
                statsInit(data_id,_date,dateselect);
                chartPage.init(data_id,_date,dateselect);
            },1000*60)
        }
    }
    var getdata = null;
    var statsData = false;
    var data_id=null;
    var _date="";
    var indexloading = null;
    var dateselect ='hour';

    $(function(){
        $('.arrows').click(function(){
            if($('#refreshs').css('right')=='0px'){
                $('.arrows span').removeClass('glyphicon-arrow-right').addClass('glyphicon-arrow-left');
                $('#refreshs').animate({
                    right:'-150px'
                })
            }else{
                $('.arrows span').removeClass('glyphicon-arrow-left').addClass('glyphicon-arrow-right');
                $('#refreshs').animate({
                    right:'0px'
                })
            }

        })
        $('#dateselect .btn').each(function(index){
            $(this).click(function(){
                $('#dateselect .btn').removeClass('btn-primary');
                $(this).addClass('btn-primary')
                if(index==0){
                    dateselect = 'minute';
                }else if(index==1){
                    dateselect = 'semih';
                }else if(index==2){
                    dateselect = 'hour';
                }
                refreshs()
            })
        })
        layui.use(['form','laydate'], function(){
            var form = layui.form;
            var laydate = layui.laydate;
            laydate.render({
                elem: '#date',
                value:new Date(),
                position: 'fixed',
                done: function(value, date, endDate){
                    _date =value;
                    refreshs()
                }
            });

            form.on('select(business)', function(data){
                data_id = data.value;
                if(data_id){
                    refreshs()
                }
            })


            $.ajax({
                type : "get",
                url : baseURL+"platform/findAllPlatform",
                cache : false,
                contentType : false,
                processData : false,
                dataType : "json",
                success: function(data) {
                    statsData = false;
                    if(data.code==0){
                        var _html = ''
                        for(var i=0;i<data.platformList.length;i++){
                            _html = _html + '<option value="'+data.platformList[i].platformId+'">'+data.platformList[i].platformName+'</option>'
                        }

                        $('#select').append(_html);
                        form.render();
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    statsData = false;
                    layer.msg('数据获取失败');
                }
            });
        });




    })
    function statsInit(id,date){
        var _data ={
            platformId:id,
            dateTime:date+''
        };
        console.log(1111111111111)
        if(!statsData){
            indexloading = layer.load(2);
            statsData = true;
            $.ajax({
                type : "POST",
                url : baseURL+"statis/getStatis",
                cache : false,
                data:_data,
                dataType : "json",
                success: function(data) {
                    layer.close(indexloading);
                    statsData = false;
                    if(data.code==0){
                        //累计用户数
                        setData('stats1_num','#stats1',data.result.totalUser)
                        //新增用户数
                        setData('stats2_num','#stats2',data.result.newUser,data.result.newUserRiseOrFall,data.result.newUserPercent)
                        //活跃用户数
                        setData('stats3_num','#stats3',data.result.activeUser,data.result.activeUserRiseOrFall,data.result.activeUserPercent)
                        //转发文章数
                        setData('stats4_num','#stats4',data.result.forwardArticle,data.result.forwardArticleRiseOrFall,data.result.forwardArticlePercent)
                        //文章新增数
                        setData('stats6_num','#stats6',data.result.newArticle,data.result.newArticleRiseOrFall,data.result.newArticlePercent)
                        //被封域名数
                        setData('stats7_num','#stats7',data.result.lockedDomain,data.result.lockedDomainRiseOrFall,data.result.lockedDomainPercent)
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    layer.close(indexloading);
                    statsData = false;
                     layer.msg('数据获取失败');
                }
            });
            //ip数
            $.ajax({
                type : "POST",
                url : baseURL+"ip/getIndexIpData",
                cache : false,
                data:_data,
                dataType : "json",
                success: function(data) {
                    if(data.code==0){
                        setData('stats5_num','#stats5',data.ipCount.ipCount,data.ipCount.riseOrFall,data.ipCount.ratio)

                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });
            //转发文章人数
            // $.ajax({
            //     type : "POST",
            //     url : baseURL+"articleStatis/getForwardArticlePeopleStatisTotal",
            //     cache : false,
            //     data:_data,
            //     dataType : "json",
            //     success: function(data) {
            //         if(data.code==0){
            //             //ip信息
            //             setData('stats8_num','#stats8',data.result.ycount,data.result.riseOrFall,data.result.percent)
            //         }else{
            //             layer.msg('数据获取失败');
            //         }
            //     }
            // });
        }

    }

    function isInteger(obj) {

        return Math.round(obj) == obj   //是整数，则返回true，否则返回false
    }


    function setData(id,ids,totalCount,riseOrFall,countRate){
        var demo = new CountUp(id, 0, transformNum(totalCount),isInteger(transformNum(totalCount))?0:1, 2, {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
            suffix: (totalCount+'').length>=5?'万':''
        });
        demo.start();

        if(riseOrFall==1){
            $(ids+' .stats_contrast_num').html('+'+countRate+'%').css({'color':'red'})
            $(ids+' .glyphicon').removeClass('glyphicon-arrow-down ').addClass('glyphicon-arrow-up ')
        }else{
            $(ids+' .stats_contrast_num').html(countRate+'%').css({'color':'#76d471'});
            $(ids+' .glyphicon').removeClass('glyphicon-arrow-up ').addClass('glyphicon-arrow-down ')
        }


    }
    function transformNum(e,b){
        if(String(e).length<=4){
            return String(e);
        }else{
            var _e
            if(((parseFloat(e)/10000).toString()).indexOf('.')!=-1){
                _e = (parseFloat(e)/10000).toFixed(1);
            }else{
                _e = (parseFloat(e)/10000)
            }
            return _e+ (b==1?'万':'');
        }
    }
</script>